<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="/commons/errorpage/500.jsp"%>
<%@ include file="/commons/comm_const_tag.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>遮罩 - ${appTitle}</title>
<%@ include file="/commons/comm_css_js.jsp"%>
<script type="text/javascript" src="${syntax}"></script>
<link rel="stylesheet" type="text/css" href="${contextPath}/jqueryanze/css/jqueryanze.css?_v=${rsVer}" />
<link rel="stylesheet" type="text/css" href="${contextPath}/jqueryanze/css/overlay.css?_v=${rsVer}" />
<script type="text/javascript" src="${contextPath}/jqueryanze/js/jqueryanze.js?_v=${rsVer}"></script>
<script type="text/javascript" src="${contextPath}/jqueryanze/js/overlay.js?_v=${rsVer}"></script>
</head>

<body>
<%-- 	<%@ include file="/commons/comm_page_header.jsp"%> --%>
   	<div id="tabs">
		<ul>
			<li><a href="#show">描述</a></li>
			<li><a href="#demo">演示</a></li>
		</ul>
		<div id="show">
			<h2>遮罩</h2>
			<p>在一些页面上需要屏蔽用户操作的时候可以使用遮罩把页面罩起来。比如：在加载资源，需要用户等待的时候。</p>
			<p>同时我们也提示了最常用的加载时使用的遮罩方法：.anzeLoading() 方法。</p>
			<p>遮罩可以多次打开，但打开多少次就必须关闭多少次。</p>
			<p>也可以同时对多个元素进行遮罩。</p>
			<p class="ui-state-highlight ui-corner-all">
				<span class="ui-icon ui-icon-info"></span><strong>注意：</strong>
				只支持在 document，window，html，body，div，iframe 元素上加遮罩。</p>
			<div class="ui-widget ui-widget-content ui-corner-all method">
				<p class="ui-widget-header method-header">.anzeOverlay( [cmd[, options]] )</p>
				<ul>
					<li>
						<span class="param-header">cmd</span>
<!-- 						<span class="param-required">True</span> -->
						<span class="param-type">String</span>
						<span class="param-default">"show"</span>
						<br>要执行的命令，“show”：显示遮罩，“close”：关闭遮罩，“hide”：隐藏遮罩
					</li>
					<li>
						<span class="param-header">options</span>
						<span class="param-type">PlainObject</span>
						<ul>
							<li>
								<span class="param-header">opacity</span>
								<span class="param-type">Boolean</span>
								<span class="param-default">true</span>
								<br>背景是否不透明，可选值：
								<ul>
									<li>
										<span class="param-header">true</span>
										<br>背景不透明
									</li>
									<li>
										<span class="param-header">false</span>
										<br>背景透明</li>
								</ul>
							</li>
							<li>
								<span class="param-header">content</span>
								<span class="param-type">Selector</span>
								<span class="param-type">Element</span>
								<span class="param-type">jQuery</span>
								<span class="param-default">null</span>
								<br>在遮罩上面显示的内容</li>
							<li>
								<span class="param-header">timeout</span>
								<span class="param-type">Number</span>
								<span class="param-default">-1</span>
								<br>自动关闭时间，单位：秒，-1:不自动关闭</li>
							<li>
								<span class="param-header">zIndex</span>
								<span class="param-type">Number</span>
								<span class="param-default">300</span>
								<br>遮罩的index值</li>
						</ul>
					</li>
				</ul>
				<p class="ui-widget-header method-header">.anzeLoading( [cmd[, options]] )</p>
				<ul>
					<li>
						<span class="param-header">cmd</span>
						<span class="param-type">String</span>
						<span class="param-default">"show"</span>
						<br>要执行的命令，“show”：显示遮罩，“close”：关闭遮罩，“hide”：隐藏遮罩
					</li>
					<li>
						<span class="param-header">options</span>
						<span class="param-type">PlainObject</span>
						<ul>
							<li>
								<span class="param-header">type</span>
								<span class="param-type">String</span>
								<span class="param-default">"L"</span>
								<br>显示进度的类型，可选值：
								<ul>
									<li>
										<span class="param-header">"L"</span>
										<br>在较大的元素上可使用，显示的进度条大
									</li>
									<li>
										<span class="param-header">"S"</span>
										<br>在较小的元素上可使用，显示的进度条小</li>
								</ul>
							</li>
							<li>
								<span class="param-header">opacity</span>
								<span class="param-type">Boolean</span>
								<span class="param-default">true</span>
								<br>背景是否不透明，可选值：
								<ul>
									<li>
										<span class="param-header">true</span>
										<br>背景不透明
									</li>
									<li>
										<span class="param-header">false</span>
										<br>背景透明</li>
								</ul>
							</li>
							<li>
								<span class="param-header">timeout</span>
								<span class="param-type">Number</span>
								<span class="param-default">-1</span>
								<br>自动关闭时间，单位：秒，-1:不自动关闭</li>
							<li>
								<span class="param-header">zIndex</span>
								<span class="param-type">Number</span>
								<span class="param-default">300</span>
								<br>遮罩的index值</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="demo">
			<div class="ui-widget-content ui-corner-all demo-div">
				外层div
				<div class="ui-widget-content ui-corner-all left-div">左边div</div>
				<div class="ui-widget-content ui-corner-all right-div">右边div</div>
			</div>
			<br>
			<span id="btnset1">
				<input type="button" id="btn11" value="左边div遮罩"><input type="button" id="btn12" value="关闭左边div遮罩">
			</span>
			<span id="btnset2">
				<input type="button" id="btn21" value="右边div遮罩"><input type="button" id="btn22" value="关闭右边div遮罩">
			</span>
			<span id="btnset3">
				<input type="button" id="btn31" value="外层div遮罩"><input type="button" id="btn32" value="关闭外层div遮罩">
			</span>
			<span id="btnset4">
				<input type="button" id="btn41" value="全页面遮罩">
				<input type="radio" id="btn42" checked="checked"><label for="btn42">5 秒后自动关闭</label>
			</span>
			<pre class="syntax xml">	&lt;div class="ui-widget-content ui-corner-all demo-div"&gt;
		外层div
		&lt;div class="ui-widget-content ui-corner-all left-div"&gt;左边div&lt;/div&gt;
		&lt;div class="ui-widget-content ui-corner-all right-div"&gt;右边div&lt;/div&gt;
	&lt;/div&gt;
	&lt;span id="btnset1"&gt;
		&lt;input type="button" id="btn11" value="左边div遮罩"&gt;&lt;input type="button" id="btn12" value="关闭左边div遮罩"&gt;
	&lt;/span&gt;
	&lt;span id="btnset2"&gt;
		&lt;input type="button" id="btn21" value="右边div遮罩"&gt;&lt;input type="button" id="btn22" value="关闭右边div遮罩"&gt;
	&lt;/span&gt;
	&lt;span id="btnset3"&gt;
		&lt;input type="button" id="btn31" value="外层div遮罩"&gt;&lt;input type="button" id="btn32" value="关闭外层div遮罩"&gt;
	&lt;/span&gt;
	&lt;span id="btnset4"&gt;
		&lt;input type="button" id="btn41" value="全页面遮罩"&gt;
		&lt;input type="radio" id="btn42" checked="checked"&gt;&lt;label for="btn42"&gt;5 秒后自动关闭&lt;/label&gt;
	&lt;/span&gt;</pre>
			<pre class="syntax javascript">	$("#btnset1").buttonset();
	
	$("#btn11").click(function() {
		$(".left-div").anzeLoading();
	});
	
	$("#btn12").click(function() {
		$(".left-div").anzeLoading("hide");
	});
	
	$("#btnset2").buttonset();
	
	$("#btn21").click(function() {
		$(".right-div").anzeLoading({ type: "S" });
	});
	
	$("#btn22").click(function() {
		$(".right-div").anzeLoading("hide");
	});
	
	$("#btnset3").buttonset();
	
	$("#btn31").click(function() {
		$(".demo-div").anzeLoading();
	});
	
	$("#btn32").click(function() {
		$(".demo-div").anzeLoading("hide");
	});
	
	$("#btnset4").buttonset();
	
	$("#btn41").click(function() {
		$("body").anzeLoading({ timeout: 5000 });
	});</pre>
		</div>
	</div>

<%-- 	<%@ include file="/commons/comm_page_footer.jsp"%> --%>
</body>
</html>